// 导入path模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 是否开启source map
  // source-map  生成独立的map文件
  // devtool: 'source-map',
  // 打包模式 development 开发 / production 生产
  mode: 'development',
  // 打包的入口文件
  entry: path.resolve(__dirname, 'src', 'index.js'),
  // 开发服务器
  devServer: {
    port: 9000, // 实时打包所用的端口号
    open: true, // 初次打包完成后，自动打开浏览器
    // 服务器的根目录
    static: path.join(__dirname, './dist'),
    hot: false,
  },
  // 打包到哪里
  output: {
    // 使用绝对路径
    path: path.resolve(__dirname, 'dist'),
    // 打包出来的文件名
    filename: 'bundle.js',
    // 每次打包时清除dist目录
    clean: true,
    assetModuleFilename: 'images/[hash][ext][query]',
  },
  // 模块配置
  module: {
    // 解析规则
    rules: [
      {
        test: /\.css$/i, // .css结尾的文件
        use: ['style-loader', 'css-loader'], // 通过 这2个 loader进行解析
      },
      {
        test: /\.less$/i, // .less结尾的文件
        use: [
          // 使用如下的loader进行解析
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i, // 图片资源
        type: 'asset/resource', // 生成一个单独的文件，并设置url
      },
    ],
  },
  // 插件配置
  plugins: [
    new HtmlWebpackPlugin({
      // js插入的位置
      inject: 'body',
      // 打包之后的文件名
      filename: 'index.html',
      // 使用哪个文件作为模板
      template: path.resolve(__dirname, './public/index.html'),
    }),
  ],
}
